@import '../../common/common';

.deviceList {
  @include wh(100%, 100%);
  position: relative;
  font-size: px2rem(26);
  .top-titile {
    @include cl();
    font-size: px2rem(26);
    color: #fff;
    opacity: 0.6;
    top: px2rem(40);
  }
  .main {
    @include wh(100%, 100%);
    position: relative;
    margin-top: px2rem(86);
    color: #999;
    padding: 0 px2rem(40);
    .tab {
      @include borderRadius(5px 5px 0 0);
      padding: px2rem(30) px2rem(15) 0;
      border-bottom: 1px solid #d7d7d7;
      @include fj();
      li {
        text-align: center;
        width: px2rem(204);
        padding-bottom: px2rem(20);
        .icon-box {
          @include wh(px2rem(68), px2rem(68));
          @include borderRadius(50%);
          padding-top: px2rem(9);
          margin: auto;
          .icon-sub {
            @include wh(px2rem(48), px2rem(48));
            @include borderRadius(50%);
            margin:0 auto 0 auto;
            text-align: center;
            .icon{
              @include hl(px2rem(48));
              font-size: px2rem(28);
              color: #fff;
            }
          }
        }
        p {
          margin-top: px2rem(12);
        }
      }
    }
    .area-box {
      @include wh(100%, auto);
      @include fj();
      align-items: center;
      padding: px2rem(15) px2rem(20) px2rem(15) px2rem(30);
      background: #fff;
      font-size: px2rem(24);
      box-shadow: rgb(218,229,237) 1px 4px 6px;
      .icon {
        vertical-align: middle;
      }
      .zone {
        font-size: px2rem(26);
        .icon {
          font-size: px2rem(26);
        }
      }
    }
  }
  #dialogDelete {
    .weui-dialog {
      font-size: px2rem(28);
      width: 74%;
      max-width: 74%;
      .weui-dialog__hd {
        padding: px2rem(20) px2rem(30);
        text-align: left;
        color: #42aaff;
        border-top: px2rem(6) solid #42aaff;
        border-bottom: 1px solid #EBEBEB;
      }
      .weui-dialog__bd {
        @include fj();
        padding: px2rem(35) px2rem(50) px2rem(90);
        align-content: center;
        .icon-box {
          .icon {
            font-size: px2rem(66);
            color: #42aaff;
            background: #fff;
            line-height: px2rem(100);
          }
        }
        .jb {
          text-align: left;
          padding-left: px2rem(40);
          line-height: px2rem(50);
        }
      }
    }
  }
  #dialogSeach {
    font-size: px2rem(26);
    .icon {
      font-size: px2rem(45);
      color: #999;
      padding-right: px2rem(30);
      vertical-align: middle;
    }
    .weui-dialog__bd {
      padding: px2rem(40);
      .top {
        text-align: left;
        input {
          display: block;
          border: none;
          padding: px2rem(15) 0;
          margin-left: px2rem(80);
          border-bottom: 1px solid #ebebeb;
          width: px2rem(590);
        }
      }
      .time {
        text-align: left;
        padding-top: px2rem(20);
        .input-time {
          @include fj(space-between, center);
          padding: px2rem(10) px2rem(30) 0 px2rem(80);
          .box {
            width: px2rem(240);
            border: 1px solid #d7d7d7;
            @include borderRadius(30px);
            padding: 0 px2rem(20);
            line-height: px2rem(50);
            .date {
              font-size: px2rem(24);
            }
            .icon {
              font-size: px2rem(30);
              color: #999;
              padding-right: px2rem(5);

            }
            span {
              line-height: 0!important;
            }
          }
        }
      }
      .deviceType {
        padding-right: px2rem(35);
        padding-top: px2rem(20);
        text-align: left;
        .deviceTypeBox {
          @include fj();
          margin-left: px2rem(80);
          .device {
            height: px2rem(60);
            @include cn();
            border: px2rem(2) solid #ccc;
            padding: px2rem(10) px2rem(20);
            @include borderRadius(px2rem(60));
            .img-log {
              @include wh(px2rem(25), px2rem(25));
              border: px2rem(2) solid #ccc;
              @include borderRadius();
              margin-right: px2rem(10);
              padding-top: px2rem(4);
              p {
                @include wh(px2rem(13), px2rem(13));
                @include borderRadius(50%);
                background: #42aaff;
                margin: auto;
              }
              &:after {
              }
            }
            span {
            }
          }
        }
      }
    }
    .weui-dialog__ft {
      div {
        @include wh(100%, px2rem(90));
        @include hl(px2rem(90));
        color: #fff;
        .icon {
          color: #fff;
          padding-right: px2rem(10);
          vertical-align: bottom;
        }
      }
    }
  }
}
.list-warp, .warp-box {
  padding-bottom: px2rem(268);
  overflow: auto;
  height: 100%;
}
.bdcolordb {
  border: 1px solid #dbdbdb;
}
.bdcolor42 {
  border: 1px solid #42aaff;
}
.bgC {
  background: #ccc;
}
.bg9 {
  background: #999;
}
.color9 {
  color: #999;
}
.color4c {
  color: #4c4c4c;
}
.bgActive {
  background: #67b9fe;
}
.bgActiveSub {
  background: #2e9bfd;
}
.bdShow {
  border-bottom: 2px solid #2e9bfd;
}
//...
.main-center {
  margin-top: 10px;
  @include wh(100%, auto);
  @include borderRadius(3px);
  border:1px solid #f5f5f5;
  font-size: px2rem(26);
  box-shadow: rgb(218,229,237) 1px 4px 6px;
  .li1 {
    background: #fff;
    @include wh(100%, auto);
    padding: px2rem(25) px2rem(58) 0 px2rem(30);
    position: relative;
    img {

    }
    .we-icon {
      position: absolute;
      left: px2rem(0);
      top: px2rem(0);
    }
    .li1-main1 {
      @include fj();
      padding-left: px2rem(125);
      .li1-sub1 {
        font-size: px2rem(28);
        .p2 {
          font-weight: 600;
          margin-bottom: px2rem(10);
          @include hl(px2rem(60));
          font-size: px2rem(30);
        }
      }
      .li1-sub2 {
        font-size: px2rem(24);
        text-align: end;
        .p-cj {
          @include hl(px2rem(60));
          span {
            color: #4a4a4a;
          }
        }
      }
    }
    .date-box {
      padding: px2rem(20) 0 px2rem(30);
      .li1-main2 {
        background: #fff;
        font-size: px2rem(24);
        @include fj();
        padding-bottom: px2rem(10);
      }
      p {
        font-size: px2rem(24);
        span {
          font-size: px2rem(26);
        }
      }
    }
    .line {
      @include wh(px2rem(554), auto);
      border-top: 1px dashed $bdc;
    }
  }
  .li2 {
    @include wh(100%, auto);
    padding: px2rem(15) px2rem(50);
    @include fj();
    justify-content: flex-end;
    border-top: 1px solid #d7d7d7;
    a {
      @include wh(px2rem(150), px2rem(64));
      @include borderRadius(30px);
      line-height: px2rem(64);
      margin: px2rem(5) 0;
      font-size: px2rem(26);
      color: #fff;
      padding: 0;
    }
    .icon-box {
      @include wh(px2rem(72), px2rem(72));
      @include borderRadius(50%);
      background: #b3d7ec;
      text-align: center;
      padding-top: px2rem(6);
      margin-left: px2rem(20);
      .icon {
        font-size: px2rem(38);
        color: #fff;
      }
    }
  }
}
